<!DOCTYPE html>
{% extends 'base1.html' %}
{% load static %}

{% block title %}
    {# - 注册#}
{% endblock %}

{% block css %}

{% endblock %}

{% block main_block %}

    {% if registerForm.errors %}
        <div class="alert alert-success" role="alert">
            <h4 class="alert-heading">注册出现问了哦！</h4>
            <p>{{ registerForm.errors }}</p>
            <hr>
            <p class="mb-0">请再次注册！</p>
        </div>
    {% endif %}

    <script type="text/javascript">
        function name() {
            var username = document.getElementById("id_username");
            var usernametext = username.value;
            //验证字符串符合规则
            var patt = /^\d{10}$/;
            /*test方法用于测试字符串是否匹配规则*/
            if (patt.test(usernametext)) {

            } else {
                alert("学号不合法！")
            }
        }
    </script>

    <form class="form-group registerForm" action="" method="POST" style="width: 40%;margin-left: 30%;">
        {% csrf_token %}
        <h1 style="text-align: center">用户注册</h1>
        <p>
            <label for="id_username">学号:</label>
            <input class="form-control" type="text" name="username" maxlength="10" autofocus required
                   id="id_username" value="">
            <small class="form-text text-muted">必填! 10位学号</small>
        </p>
        <p>
            <label for="id_nickyName">昵称:</label>
            <input class="form-control" type="text" name="nickyName" maxlength="50"
                   id="id_nickyName">
        </p>
        <p>
            <label for="id_password1">密码:</label>
            <input class="form-control" type="password" name="password1" required id="id_password1">
            <small class="form-text text-muted">
                你的密码必须包含至少 8 个字符!
            </small>
        </p>
        <p><label for="id_password2">密码确认:</label>
            <input class="form-control" type="password" name="password2" required id="id_password2">
            <small class="form-text text-muted">为了校验，请输入与上面相同的密码。</small>
        </p>
        <p>
            <label for="id_email">电子邮件地址:</label>
            <input class="form-control" type="email" name="email" maxlength="254" id="id_email"></p>

        <p>
            <label class="form-check-label" for="id_cate">是否学生:</label>
            <input type="checkbox" name="cate" required id="id_cate">
            <small class="form-text text-muted">勾选表明为学生用户，不勾选为教师用户</small>
        </p>
        <p>
            <label for="id_faculty">学院:</label>
            <input class="form-control" type="text" name="faculty" maxlength="20" required id="id_faculty">
            <small class="form-text text-muted">请输入您的学院</small>
        </p>

        <div class="container">
            <div class="row">
                <div class="col-6">
                    <button class="btn btn-primary btn-block" type="submit" onclick="name()" style="width: 100%">立即注册</button>
                </div>
                <div class="col-6">
                    <a href="/login/"><button type="button" class="btn btn-primary btn-block">返回登录</button></a>
                </div>
            </div>
        </div>
    </form>
    <br/>
{% endblock %}